import React from 'react'
import PropTypes from 'prop-types';
import NormalDatePicker from '../DatePicker/NormalDatePicker'
import Popover from '@material-ui/core/Popover'
import Fade from '@material-ui/core/Fade'
import Paper from '@material-ui/core/Paper'
import {
    TableEditRow
} from '@devexpress/dx-react-grid-material-ui';

const PROPS_BLACKLIST = [
    'dateFormat',
];

const cleanProps = (props) => {
    PROPS_BLACKLIST.forEach(field => delete props[field]);
    return props;
};

class DateTextCell extends React.Component {

    state = {
        anchorEl: null
    }
    handleFocusText = event => {
        this.setState({anchorEl: event.currentTarget})
    }

    handleFocusClose = () => {
        this.setState({anchorEl: null})
    }

    activeDatePickerValue = (date) => {

        const {dateFormat} = this.props

        const value = date.Format(dateFormat)

        this.setState({anchorEl: null})

        this.props.onValueChange(value)
    }

    render() {

        const {...props} = this.props;
        const {anchorEl} = this.state
        cleanProps(props);
        const open = Boolean(anchorEl);

        return (
            <React.Fragment>
                <TableEditRow.Cell {...props} onClick={this.handleFocusText}>
                </TableEditRow.Cell>
                <Popover id="simple-popper" open={open} anchorEl={anchorEl} onClose={this.handleFocusClose}>
                    <Fade timeout={250} in={true}>
                        <Paper>
                            <NormalDatePicker onSelect={this.activeDatePickerValue}></NormalDatePicker>
                        </Paper>
                    </Fade>
                </Popover>
            </React.Fragment>

        )
    }
}

DateTextCell.defaultProps = {
    dateFormat: 'yyyy-MM-dd'
}
DateTextCell.propTypes = {
    dateFormat: PropTypes.string
}
export default DateTextCell